<template>
  <page-view class="address">
    <page-header title="修改收货地址" :show-back="true"></page-header>
    <!-- 地址是area-list渲染出来的,把值丢进去就行了 -->
    <!-- placeholder="给的是初始值" -->

    <address-edit
      :area-list="areaList"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      :is-saving="isSubmiting"
    >
      <field
        v-model="tag"
        label="标签"
        placeholder="给地址设置一个标签"
        required
    /></address-edit>
  </page-view>
</template>

<script>
import { AddressEdit, Area, Field, CellGroup, Toast } from "vant";
import { reactive, toRefs } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import api from "@/utils/api";
import { useRouter } from "vue-router";
export default {
  name: "AddressInfo",
  components: {
    AddressEdit,
    PageHeader,
    Area,
    Field,
    CellGroup,
  },
  setup() {
    const router = useRouter();

    //页面所需要的动态数据
    let info = reactive({
      areaList: {},
      isSubmiting: false,
      tag: "",
    });
    //点击保存按钮后的事件
    const onSave = async (content) => {
      if (info.isSubmititing) return;
      info.isSubmiting = true;
      let address_info = {
        address: [
          content.province,
          content.city,
          content.county,
          content.addressDetail,
        ].join(" "),
        phone: content.tel,
        person_name: content.name,
        tag: info.tag,
      };
      let res = await api.addressInfo.addAddress(address_info);
      info.isSubmiting = false;
      Toast.success("新增地址成功");
      router.back();
    };
    //找地址(数据库里面读)
    const getAreaList = async () => {
      let res = await api.area.getAreaList();
      info.areaList = res;
    };
    getAreaList();

    return {
      onSave,
      ...toRefs(info),
      getAreaList,
    };
  },
};
</script>

<style lang="scss" scoped></style>
